<template>
    <div>
        <el-dialog :title="form.title" :visible.sync="form.dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="提货点名称" prop="pickname" :label-width="formLabelWidth">
                <el-input size="small" v-model="form.pickname" placeholder="请输入提货点名称" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="提货点简介" :label-width="formLabelWidth">
                <el-input size="small" v-model="form.pickjie" placeholder="请输入提货点简介"  autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="提货点手机号" prop="pickphone" :label-width="formLabelWidth">
                <el-input size="small" v-model="form.pickphone" placeholder="请输入提货点手机号"  autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="请选择提货点地址" prop="pickplace" :label-width="formLabelWidth">
                <el-cascader
                size="small"
                v-model="form.pickplace"
                :options="options"
                @change="handleChange">
                </el-cascader>
            </el-form-item>

            <el-form-item label="详细地址" prop="pickplaces" :label-width="formLabelWidth">
                <el-input size="small" v-model="form.pickplaces" placeholder="请输入详细地址"  autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="提货点营业" :label-width="formLabelWidth">
                <el-time-picker
                    size="small"
                    is-range
                    v-model="form.date"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="请选择营业时间">
                </el-time-picker>
            </el-form-item>

            <el-form-item label="提货点logo" prop="img" :label-width="formLabelWidth">
                <div class="logo" @click="imgFun">
                    <span class="iconfont">&#xe6ac;</span>
                    <img :src="form.img" alt="" style="width:50px;height:50px;">
                </div>
            </el-form-item>

            <el-form-item label="经纬度" prop="longitude" :label-width="formLabelWidth">
                <p class="p_place">
                    <el-input class="inps" size="" v-model="form.longitude" placeholder="请查找位置"  autocomplete="off"></el-input>
                    <el-button type="primary" size="mini" @click="mapFun">查找位置</el-button>
                </p>
                
            </el-form-item>

            
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="form.dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click=" form.title === '添加提货点' ? submitForm('form') : editFun('form') ">确 定</el-button>
        </div>
        </el-dialog>

        <!-- 图片遮罩层 -->
        <MarkDiv :isShowt='isShowt' @imgArr='imgArr'></MarkDiv>

        <!-- 地图遮罩层 -->
        <MapMark :isMap="isMap" @mapVal='mapVal'></MapMark>
    </div>
</template>

<script>
import MarkDiv from '../imgDiv.vue'
import MapMark from './map.vue'
import moment from 'moment'
import {pickupadd,pickupedit} from '../../api/pickuper/pickuper'
export default {
    components:{
        MarkDiv,
        MapMark
    },
    props:['form'],
    data(){
        const checkMobile = (rule, value, cb) => {
            const regMobile = /^(0|86|17951)?1[3456789]{1}\d{9}$/
            if (regMobile.test(value)) {
                return cb()
            }
            cb(new Error('请输入合法手机号'))
        }
        return{
            formLabelWidth: '140px',
            options:[{
                value:'北京',
                label:"北京",
                children:[{
                    value:'东城区',
                    label:"东城区",
                },{
                    value:'西城区',
                    label:"西城区",
                },{
                    value:'崇文区',
                    label:"崇文区",
                },{
                    value:'宣武区',
                    label:"宣武区",
                },{
                    value:'朝阳区',
                    label:"朝阳区",
                },{
                    value:'海淀区',
                    label:"海淀区",
                }]
            },{
                value:'上海',
                label:"上海",
                children:[{
                    value:'和平区',
                    label:"和平区",
                },{
                    value:'南开区',
                    label:"南开区",
                },{
                    value:'西青区',
                    label:"西青区",
                },{
                    value:'北辰区',
                    label:"北辰区",
                },{
                    value:'武清区',
                    label:"武清区",
                },{
                    value:'静海县',
                    label:"静海县",
                }]
            },{
                value:'海南',
                label:"海南",
                children:[{
                    value:'海口',
                    label:"海口",
                    children:[{
                        value:'龙华区',
                        label:"龙华区",
                    },{
                        value:'琼山区',
                        label:"琼山区",
                    }]
                },{
                    value:'三亚',
                    label:"三亚",
                    children:[{
                        value:'五指山',
                        label:"五指山",
                    },{
                        value:'琼海',
                        label:"琼海",
                    }]
                }]
            },{
                value:'河南',
                label:"河南",
                children:[{
                    value:'郑州',
                    label:"郑州",
                },{
                    value:'开封',
                    label:"开封",
                },{
                    value:'洛阳',
                    label:"洛阳",
                },{
                    value:'安阳',
                    label:"安阳",
                },{
                    value:'信阳',
                    label:"信阳",
                    children:[
                    {
                        value:'淮滨县',
                        label:"淮滨县",
                    },{
                        value:'潢川县',
                        label:"潢川县",
                    }
                ]
                },{
                    value:'驻马店',
                    label:"驻马店",
                    children:[
                    {
                        value:'新蔡县',
                        label:"新蔡县",
                    },{
                        value:'西平县',
                        label:"西平县",
                    }
                    ]
                }]
            }],
            isShowt:{
                titlet:'请选择用户头像',
                isShow:false
            },
            rules: {
                pickname: [
                    { required: true, message: '请输入提货点名称', trigger: 'blur' },
                ],
                pickphone: [
                    { required: true, message: '请填写手机号', trigger: 'blur' },
                    { validator: checkMobile, triger: 'change' }
                ],
                pickplace: [
                    {  required: true, message: '请选择提货点地址', trigger: 'change' }
                ],
                pickplaces: [
                    {required: true, message: '请输入详细地址', trigger: 'blur' }
                ],
                img: [
                    {required: true, message: '请至少选择一个logo图片', trigger: 'blur' }
                ],
                longitude: [
                    { required: true, message: '请选择经纬度', trigger: 'blur' }
                ]
            },
            isMap:{
                centerDialogVisible:false,
                lng:0,
                lat:0
            }
        }
    },
    methods:{
        //地图返回经纬度
        mapVal(val){
            console.log(val);
            this.isMap.centerDialogVisible = val.show;
            this.isMap.lng = val.places.lng
            this.isMap.lat = val.places.lat
            this.form.longitude = this.isMap.lng + ',' + this.isMap.lat;
        },
        //打开地图选择
        mapFun(){
            this.isMap.centerDialogVisible = true;
            //console.log(this.form.longitude);
            this.isMap.lng = this.form.longitude.split(',')[0]
            this.isMap.lat = this.form.longitude.split(',')[1]
        },
        editFun(formName){
            this.$refs[formName].validate((valid) => {
            if (valid) {
                //console.log(this.form);
                this.form.date[0] = moment(this.form.date[0]).format('hh:mm:ss')
                this.form.date[1] = moment(this.form.date[1]).format('hh:mm:ss')
                console.log(this.form);

                pickupedit({
                    address:this.form.pickplace,
                    address2:this.form.pickplace,
                    dataVal:[],
                    id:this.form.id,
                    day_time:this.form.date,
                    detailed_address:this.form.pickplaces,
                    id:this.form.id,
                    image:this.form.img,
                    introduction:this.form.pickjie,
                    latlng:this.form.longitude,
                    name:this.form.pickname,
                    phone:this.form.pickphone,
                    valid_time:'',
                }).then(res => {
                    if (res.data.status === 200) {
                        this.$message.success(res.data.msg)
                        this.form.dialogFormVisible = false;
                        this.$emit('addVal',this.form.dialogFormVisible)
                    }else{
                        this.$message.error(res.data.msg)
                    }
                },err => {
                    console.log(err);
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //提交表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.form.date[0] = moment(this.form.date[0]).format('hh:mm:ss')
                this.form.date[1] = moment(this.form.date[1]).format('hh:mm:ss')
                console.log(this.form);

                pickupadd({
                    address:this.form.pickplace,
                    address2:[],
                    day_time:this.form.date,
                    detailed_address:this.form.pickplaces,
                    id:this.form.id,
                    image:this.form.img,
                    introduction:this.form.pickjie,
                    latlng:this.form.longitude,
                    name:this.form.pickname,
                    phone:this.form.pickphone,
                    valid_time:[],
                }).then(res => {
                    if (res.data.status === 200) {
                        this.$message.success(res.data.msg)
                        this.form.dialogFormVisible = false;
                        this.$emit('addVal',this.form.dialogFormVisible)
                    }else{
                        this.$message.error(res.data.msg)
                    }
                },err => {
                    console.log(err);
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //选择图片回值
        imgArr(val){
            //console.log(val);
            this.isShowt.isShow = val.isShow;
            this.form.img = val.imgArr[0];
        },
        // 图片遮罩层显示
        imgFun(){
            this.isShowt.isShow = true;
        },
        handleChange(value) {
            console.log(value);
        }
    }
}
</script>

<style lang="scss">
    .logo{
        width: 50px;
        height: 50px;
        border: 1px dashed #ccc;
        border-radius: 4px;
        background: #f1f1f1;
        position: relative;
        .iconfont{
            position: absolute;
            top: 4px;
            left: 15px;
        }
        img{
            position: absolute;
            z-index: 1;
        }
    }
    .p_place{
        display: flex;
        .inps{
            width: 50%;
        }
    }
</style>